/**
 * Created by ezgoing on 14/9/2014.
 */

"use strict";
(function(factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else {
        factory(jQuery);
    }
}(function($) {
    var cropbox = function(options, el) {
        var el = el || $(options.imageBox),
            obj = {
                state: {},
                ratio: 1,
                options: options,
                imageBox: el,
                thumbBox: el.find(options.thumbBox),
                spinner: el.find(options.spinner),
                image: new Image(),
                cb: options.cb,
                winSlider:options.winSlider,
                ratioState: true,
                changeRatio: 0,
                difW: 0,
                difH: 0,
                getDataURL: function() {
                    var width = this.thumbBox.width(),
                        height = this.thumbBox.height(),
                        dim = el.css('background-position').split(' '),
                        size = el.css('background-size').split(' '),
                        dx = parseInt(dim[0]) - el.width() / 2 + width / 2,
                        dy = parseInt(dim[1]) - el.height() / 2 + height / 2,
                        dw = parseInt(size[0]),
                        dh = parseInt(size[1]),
                        sh = parseInt(this.image.height),
                        sw = parseInt(this.image.width);
                    return [dx, dy, dw, dh, sh, sw, (this.changeRatio)];
                },
                getBlob: function() {
                    var imageData = this.getDataURL();
                },
                zoomIn: function() {
                    this.ratio *= 1.1;
                    setBackground();
                    this.winSlider.setValue((this.winSlider.getValue() + 20));
                },
                zoomOut: function() {
                    this.ratio *= 0.9;
                    setBackground();
                    this.winSlider.setValue((this.winSlider.getValue() - 20));
                }
            },
            setBackground = function() {
                var _ind = 0;
                var _w = parseInt(obj.image.width);
                var _h = parseInt(obj.image.height);
                var w,h;
                var diffW = obj.thumbBox.width();
                var diffH = obj.thumbBox.height();
                if(obj.ratio == 1) {
                    obj.winSlider.setValue(0);
                }
                if(parseInt(obj.image.width) > parseInt(obj.image.height)) {
                    h = diffH * obj.ratio
                    w = (h * (_w/_h));
                    if(obj.ratio < 1 && h < diffH) {
                        h = diffH;
                        w = (h * (_w/_h));
                        obj.winSlider.setValue(0);
                        obj.changeRatio = w/_w;
                    }
                } else if(parseInt(obj.image.width) < parseInt(obj.image.height)) {
                    w = diffW * obj.ratio;
                    h = (w * (_h/_w));
                }
                obj.changeRatio = w/_w;
                var pw = (el.width() - w) / 2;
                var ph = (el.height() - h) / 2;
                obj.difW = w - (w/obj.ratio);
                obj.difH = h - (h/obj.ratio);
                el.css({
                    'background-image': 'url(' + obj.image.src + ')',
                    'background-size': w + 'px ' + h + 'px',
                    'background-position': pw + 'px ' + ph + 'px',
                    'background-repeat': 'no-repeat'
                });
            },
            imgMouseDown = function(e) {
                e.stopPropagation();

                obj.state.dragable = true;
                obj.state.mouseX = e.clientX;
                obj.state.mouseY = e.clientY;
            },
            imgMouseMove = function(e) {
                e.stopPropagation();
                if(e.which == 1) {
                    if (obj.state.dragable) {
                        var x = e.clientX - obj.state.mouseX;
                        var y = e.clientY - obj.state.mouseY;
                        var bg = el.css('background-position').split(' ');
                        var bgS = el.css('background-size').split(' ');
                        var bgX = x + parseInt(bg[0]);
                        var bgY = y + parseInt(bg[1]);
                        var bgSX = parseInt(bgS[0]) - 255;
                        var bgSY = parseInt(bgS[1]) -255;

                        if(bgX > 57) {
                            bgX = 56;
                        }
                        if(bgX < -bgSX) {
                            bgX = -bgSX;
                        }
                        if(bgY > 57) {
                            bgY = 56;
                        }
                        if(bgY <  -bgSY) {
                            bgY = -bgSY;
                        }
                        el.css('background-position', bgX + 'px ' + bgY + 'px');
                        obj.state.mouseX = e.clientX;
                        obj.state.mouseY = e.clientY;
                    }
                }
            },
            imgMouseUp = function(e) {

                e.stopPropagation();
                obj.state.dragable = false;
            },
            zoomImage = function(e) {}

        obj.spinner.show();
        obj.image.onload = function() {
            obj.spinner.hide();
            setBackground();
            el.bind('mousedown', imgMouseDown);
            el.bind('mousemove', imgMouseMove);
            el.bind('mouseup', imgMouseUp);
            $(window).bind('mouseup', imgMouseUp);
            el.bind('mousewheel DOMMouseScroll', zoomImage);
            obj.cb();
        };
        obj.image.src = options.imgSrc;
        el.on('remove', function() {
            $(window).unbind('mouseup', imgMouseUp)
        });

        return obj;
    };

    jQuery.fn.cropbox = function(options) {
        return new cropbox(options, this);
    };
}));
